<template>
    <header-footer :commonData="{$parent:$parent,isShowUserBox:1}">
        <div id="companyApply" class="confirmOrder" v-cloak>
            <div class="crumb">
                <ul>
                    <li class="f_left">当前位置：</li>
                    <li class="f_left">
                        <router-link to="/index">首页></router-link>
                    </li>
                    <li class="f_left">企业报名</li>
                </ul>
            </div>
            <div v-if="!isSubmit">
                <div class="clear"></div>
                <div class="company_apply index_width mainToBottom company_apply_excel">
                    <!-- 特种工报名 -->
                    <div class="specialBox index_width">
                        <div class="specialSearch">
                            <input type="text" v-model.trim="identityCode" placeholder="请输入身份证号码查询个人证书">
                            <span @click="specialSearch">
                                确认
                            </span>
                        </div>
                        <el-dialog class="companyFaceDialog" width="1150px" :visible.sync="companyFaceDialog" @opened="dialogopened">
                            <div class="specialTable">
                                <el-form>
                                    <choose-profession @childByValue="checkedFromChild" ref="mychild"></choose-profession>
                                </el-form>
                                <a class="special_cancel" @click="companyFaceDialog=false">取消</a>
                                <a class="specialBtn" @click="companyFaceBtn">确定</a>
                            </div>
                        </el-dialog>
                        <div class="specialTable" v-show="sApplyArrs.length>0">
                            <table width="100%">
                                <thead>
                                    <tr>
                                        <td width="80px">姓名</td>
                                        <td width="180px">身份证号</td>
                                        <td>项目类别</td>
                                        <td>专业（工种）</td>
                                        <td>选择网教课时</td>
                                        <td>操作</td>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="(item,index) in sApplyArrs" :key="index">
                                        <td width="80px">
                                            {{item.realName}}
                                        </td>
                                        <td width="180px" style="padding-left: 20px;">{{item.identity}}</td>
                                        <td>{{productName}}</td>
                                        <td class="preWhite">
                                            {{item.typeName}}
                                        </td>
                                        <td>
                                            <el-input-number v-model="item.multiple" :min="0" :max="40" :disabled="item.disabled"
                                                style="width: 140px;"></el-input-number>
                                        </td>
                                        <td>
                                            <button @click="del(index)" class="apply_info_btn" style="margin: 0;cursor: pointer;">移除</button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <a class="specialBtn" @click="comFaceApplyBtn">确定报名</a>
                        </div>
                    </div>
                </div>
                <!-- 报名后未付款弹框 -->
                <!-- <apply-nopay :nopayData="{currentApply:noPayTrade,type:2}"></apply-nopay> -->
            </div>

        </div>
        <div v-if="isSubmit">
            <companyConfirmApplyinfo :submitResult="submitResult" :productName="productName"
                v-on:goPrev="goPrev">

            </companyConfirmApplyinfo>
        </div>
    </header-footer>
</template>

<script>
    import headerFooter from '../../../components/cont_education/header_and_footer.vue'
    import chooseProfession from '../../../components/cont_education/special_choose_profession'
    // import applyNopay from '../../../components/home/apply_nopay.vue'
    import companyConfirmApplyinfo from '../../../components/cont_education/company_confirm_applyinfo.vue'

    export default {
        name: "company_apply",
        data: function() {
            return {
                isPrevTi: "1",
                identityCode: "",
                companyFaceDialog: false,
                checkedCities: [],
                sApplyArrs: [],
                noPayTrade: undefined,
                submitArrs: [],
                type: this.$route.params.type,
                isSubmit: false,
                submitResult: {},
                productName: "特种作业人员",

            }
        },
        mounted: function() {
            var that = this;
            this.common.post(this.api.getMerchantNoTradeApply, {}, function(res) {
                that.noPayTrade = res.resultMap;
            });
        },
        methods: {
            specialSearch: function() {
                var that = this;
                if (this.identityCode.trim() == "") {
                    this.$message.error("请输入身份证号！");
                    return;
                }
                that.companyFaceDialog = true;
            },
            dialogopened: function() {
                this.$refs.mychild.getCertificates(this.identityCode.trim());
            },
            checkedFromChild: function(val) {
                this.checkedCities = val;
            },
            companyFaceBtn: function() {
                // 全等
                if (this.checkedCities.length <= 0) {
                    this.$message.error("请选择专业！");
                    return;
                }
                if (this.common.isEquall(this.checkedCities)) {
                    this.checkArrs(this.checkedCities);
                    this.companyFaceDialog = false;
                } else {
                    var h = window.innerHeight;
                    this.$message({
                        offset: h / 2 - 40,
                        type: "error",
                        message: '选择专业（工种）不属于同一类，如有疑问请参考左上方说明！'
                    });
                    this.companyFaceDialog = true;
                }
            },
            checkArrs: function(checkedCities) {
                var that = this;
                if (checkedCities.length <= 0) return;
                var onecheckedCities = checkedCities[0];
                var m = {
                    realName: onecheckedCities.realName,
                    identity: onecheckedCities.identityCode,
                    isWebucation: "1",
                    multiple: 40,
                    typeName: "",
                    period: 0,
                    certificateIds: "",
                    disabled: false
                }
                // m.certificateNames = "";
                var ids = "";
                checkedCities.forEach(function(v) {
                    m.typeName += v.certificateName + ";\n";
                    ids += ids.length <= 0 ? v.id : "," + v.id;
                });
                // m.typeName = m.certificateNames;
                this.common.post(this.api.getTzgProductPrice, {
                    certificateIds: ids,
                    type: this.type
                }, function(res) {
                    m.period = res.resultMap.period;
                    m.productId = res.resultMap.id; //选择转的时候获取产品（在这里获取价格）
                    m.fprice = res.ext == undefined ? 0 : res.ext;
                    m.price = res.resultMap.productPrice;
                    m.certificateIds = ids;
                    that.radioChange(m, m.disabled ? 0 : 1);
                });
                that.sApplyArrs.push(m);
            },
            radioChange: function(m, value) {
                var productId = m.productId;
                var price = m.price;
                if (parseInt(value) == 0) {
                    m.multiple = 0;
                    m.disabled = true;
                    m.productId = 0;
                    m.price = 0;
                } else {
                    m.multiple = 40;
                    m.disabled = false;
                    m.productId = productId;
                    m.price = price;
                }
            },
            del: function(index) {
                this.sApplyArrs.removeAt(index);
                this.radioIndex = -1;
            },
            comFaceApplyBtn: function() { //确定提交
                var that = this;
                if (that.sApplyArrs.length <= 0) return;

                that.sApplyArrs.forEach(function(m) {
                    console.log(m.fprice)
                    if (parseInt(m.fprice) == 0) {
                        m.remark = String.Format("网教{1}课时{0}元,不含面授", m.price *
                            parseInt(m.multiple) + "", parseInt(m.multiple) + "");
                        return;
                    }
                    if (m.price == 0) {
                        m.remark = String.Format("面授{0}元,教材20元,不含网教", m.fprice - 20 + "");
                        return;
                    }
                    m.remark = String.Format("面授{0}元,教材20元,网教{2}课时{1}元", m.fprice - 20 + "", m.price *
                        parseInt(m.multiple) + "", parseInt(m.multiple));

                });
                this.common.post(this.api.merchantApply, {
                    maps: JSON.stringify(that.sApplyArrs),
                    type: this.type
                }, function(res) {
                    that.isSubmit = true;
                    localStorage.setItem("isTiPrev", that.isPrevTi);
                    localStorage.setItem("faceTiPrev", that.type);

                    that.submitResult = res.resultMap;
                });
            },
            goPrev: function() {
                var that = this;
                that.isSubmit = false;
                that.submitResult = undefined;
            }
        },
        components: {
            headerFooter,
            // applyNopay,
            chooseProfession,
            companyConfirmApplyinfo
        }
    }
</script>

<style>

    .specialTable .el-radio__input.is-checked+.el-radio__label {
        color: #1466D0;
    }

    .specialTable .el-radio__input.is-checked .el-radio__inner {
        border-color: #1466D0;
        background: #1466D0;
    }

    .specialTable .el-radio__label {
        font-size: 16px;
    }

    .specialTable .choose_project .el-form-item__content {
        width: auto;
    }

    .companyIsPrevTi,
    .companyIsPrevTi .el-form-item__label {
        font-size: 16px;
    }

    .companyIsPrevTi .el-form-item__content,
    .companyIsPrevTi .el-form-item__label {
        margin-top: 12px;
    }
</style>
